<template>
  <div class="page">
    <div class="title">人均出勤天数</div>
    <!-- 选月 -->
    <div class="flexEnd" style="margin-bottom:2rem">
      <div>
        <a-select
          label-in-value
          :default-value="{ key: '-1' }"
          style="width: 9rem;margin-right:1rem"
          @change="selectChange1"
        >
          <a-select-option value="0">{{nowMonth}}</a-select-option>
          <a-select-option value="-1">{{lastMonth}}</a-select-option>
        </a-select>
      </div>
    </div>

    <div class="diyScoll" style="overflow-x:scroll;overflow-y: hidden;height:40%;margin-bottom:2%">
      <div style="width:200%;height:90%;margin:0 auto;margin-bottom:2%">
        <Echart :echartObj="echartObj1" />
      </div>
    </div>

    <div style="width:90%;height:30%;margin:0 auto">
      <echatsPie :echartObj="echartObj2" v-if="this.isNowMonth" />
      <echatsPie2 :echartObj="echartObj2" v-else />
      <!-- <div v-else>
        1112
      </div>-->
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
import echatsPie from '@/components/echarts/pie.vue'
import echatsPie2 from '@/components/echarts/pie2.vue'
import { getAttendanceAverage } from '@/api/dataCenterHome'
import { getAttendanceManage } from '@/api/dataCenterHome'
import { mapGetters } from 'vuex'
export default {
  components: {
    Echart,
    echatsPie,
    echatsPie2
  },
  data() {
    return {
      nowMonth: moment().format('MM月'),
      lastMonth: moment()
        .subtract(1, 'months')
        .format('MM月'),
      echartObj1: {},
      echartObj2: {},
      dataXAxis: [],
      dataYAxis: [],
      max: 0,
      personAttendance: {},
      yearMonth: '',
      //判断是否是本月
      isNowMonth: false,
      timerHomeAttendance: null
    }
  },
  beforeDestroy() {
    clearInterval(this.timerHomeAttendance)
  },
  created() {
    this.getAttendance()
  },
  mounted() {
    //五分钟切换一次
    this.timerHomeAttendance = setInterval(() => {
      this.getAttendance()
    }, 300000)
  },
  computed: {
    ...mapGetters(['userInfo'])
  },

  methods: {
    moment,
    //获取考勤数据
    getAttendance() {
      this.$store.commit('setNowTime', moment(new Date()).format('YYYY-MM-DD HH:mm'))
      getAttendanceManage({ projectId: this.userInfo.projectId }).then((res) => {
        let resData = res.data.data
        this.$store.dispatch('setDataCenterAttendance', resData)
        // this.$nextTick(() => {
        this.personAttendance = this.$store.state.dataCenterAttendance.attendanceAverageVO
        // let personAttendance = this.personAttendance

        this.dataYAxis = []
        this.dataXAxis = []
        this.max = 0
        for (var key in this.personAttendance.attendanceAverage) {
          this.dataXAxis.push(key)
          this.dataYAxis.push(this.personAttendance.attendanceAverage[key])
          if (this.personAttendance.attendanceAverage[key] > this.max) {
            this.max = this.personAttendance.attendanceAverage[key]
          }
        }

        this.echartObj1 = {
          grid: {
            left: '2%',
            top: '6%',
            bottom: '6%',
            right: 0,
            containLabel: true
          },
          xAxis: {
            data: this.dataXAxis,
            axisLabel: {
              //   inside: true,
              textStyle: {
                color: '#00FFCC',
                fontSize: '10'
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            max: this.max + 10,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#00FFCC'
              }
            }
          },

          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              // barWidth: '20%',
              barWidth: 14,
              itemStyle: {
                barBorderRadius: [14, 14, 0, 0],

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00FFCC' },
                  { offset: 0.7, color: '#0C8179' },
                  { offset: 1, color: '#14394A' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
              data: this.dataYAxis
            }
          ]
        }
        let data = [
          { value: 22, name: '班组长统一考勤' },
          { value: 18, name: '考勤机考勤' }
        ]
        data[0].value = this.personAttendance.leaderAttendanceTotal
        data[1].value = this.personAttendance.machineAttendanceTotal
        this.echartObj2 = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          color: ['#11F7FD', '#FFB717'],
          legend: {
            formatter: function(name) {
              var total = 0
              var target
              for (var i = 0, l = data.length; i < l; i++) {
                // total += data[i].value
                if (data[i].name == name) {
                  target = data[i].value
                }
              }
              return name + '     ' + target + '个'
            },
            orient: 'vertical',
            right: 'right',
            top: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '考勤方式',
              type: 'pie',
              center: ['27%', '50%'],
              radius: '80%',
              data: data,
              labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      })
    },
    //切换月份
    selectChange1(value) {
      // console.log(value)
      if (value.key == '0') {
        this.yearMonth = moment().format('YYYY-MM')
        this.isNowMonth = true
        this.getMonthData()
      } else {
        this.yearMonth = moment()
          .subtract(1, 'months')
          .format('YYYY-MM')
        this.isNowMonth = false
        this.getMonthData()
      }
    },
    //对应月份数据
    getMonthData() {
      let data = {
        projectId: this.userInfo.projectId,
        yearMonth: this.yearMonth
      }
      getAttendanceAverage(data).then((res) => {
        this.personAttendance = res.data.data
        let personAttendance = this.personAttendance
        this.dataYAxis = []
        this.dataXAxis = []
        this.max = 0
        for (var key in personAttendance.attendanceAverage) {
          this.dataXAxis.push(key)
          this.dataYAxis.push(personAttendance.attendanceAverage[key])
          if (personAttendance.attendanceAverage[key] > this.max) {
            this.max = personAttendance.attendanceAverage[key]
          }
        }
        // console.log(this.dataYAxis);

        this.echartObj1 = {
          grid: {
            left: '2%',
            top: '6%',
            bottom: '6%',
            right: 0,
            containLabel: true
          },
          xAxis: {
            data: this.dataXAxis,
            axisLabel: {
              //   inside: true,
              textStyle: {
                color: '#00FFCC',
                fontSize: '10'
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            max: this.max + 10,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#00FFCC'
              }
            }
          },

          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              // barWidth: '20%',
              barWidth: 14,
              itemStyle: {
                barBorderRadius: [14, 14, 0, 0],

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00FFCC' },
                  { offset: 0.7, color: '#0C8179' },
                  { offset: 1, color: '#14394A' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
              data: this.dataYAxis
            }
          ]
        }
        let data = [
          { value: 22, name: '班组长统一考勤' },
          { value: 18, name: '考勤机考勤' }
        ]
        data[0].value = personAttendance.leaderAttendanceTotal
        data[1].value = personAttendance.machineAttendanceTotal
        // console.log(data);

        this.echartObj2 = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          color: ['#11F7FD', '#FFB717'],
          legend: {
            formatter: function(name) {
              var total = 0
              var target
              for (var i = 0, l = data.length; i < l; i++) {
                // total += data[i].value
                if (data[i].name == name) {
                  target = data[i].value
                }
              }
              return name + '     ' + target + '个'
            },
            orient: 'vertical',
            right: 'right',
            top: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '考勤方式',
              type: 'pie',
              center: ['27%', '50%'],
              radius: '80%',
              data: data,
              labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 1.6rem;
  padding: 1.6rem 0 0 1.5rem;
  color: #fff;
}
::v-deep .ant-select-selection {
  background: none;
  border: none;
  color: #fff;
}
::v-deep .ant-select-arrow {
  color: #fff;
}
::v-deep .ant-select-selection--single .ant-select-selection__rendered {
  margin-right: 0;
}
.diyScoll {
  width: 100%;
  height: 90%;
}
.diyScoll::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
  /**/
}
.diyScoll::-webkit-scrollbar-track {
  background: #eee;

  border-radius: 0.35rem;
}
.diyScoll::-webkit-scrollbar-thumb {
  background: rgba(0, 246, 255);
  width: 1rem;
  border-radius: 0.35rem;
}
</style>